<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="apple-touch-icon" sizes="76x76" href="/static/image/logo.png">
  <link rel="icon" type="image/png" href="/static/image/logo.png">
  <title>
    我的空间
  </title>
  <!--     Fonts and icons     -->
  <link rel="stylesheet" type="text/css"
    href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
  <!-- Nucleo Icons -->
  <link href="/static/assets/css/nucleo-icons.css" rel="stylesheet" />
  <link href="/static/assets/css/nucleo-svg.css" rel="stylesheet" />
  <!-- Font Awesome Icons -->
  <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
  <!-- Material Icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
  <!-- CSS Files -->
  <link id="pagestyle" href="/static/assets/css/material-dashboard.css?v=3.0.0" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="/static/assets/css/ele-index.css">
  <link rel="stylesheet" type="text/css" href="/static/my_icon/iconfont.css">
  <link rel="stylesheet" type="text/css" href="/static/css/cropper.css">
  <style>
    [v-cloak] {
      display: none;
    }

    .el-scrollbar {
      height: 100%;
    }

    .el-scrollbar__wrap {
      overflow: scroll;
      width: 103%;
      height: 103%;
    }
  </style>
</head>

<body class="g-sidenav-show  bg-gray-200">
  {% verbatim myblock %}
  <div id="app" v-cloak>
    <aside
      class="sidenav navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-start ms-3   bg-gradient-dark"
      id="sidenav-main">
      <div class="sidenav-header">
        <i class="fas fa-times p-3 cursor-pointer text-white opacity-5 position-absolute end-0 top-0 d-none d-xl-none"
          aria-hidden="true" id="iconSidenav"></i>
        <a class="navbar-brand m-0" href="#" v-if="nick_name === '_'">
          <img src="/static/image/logo.png" class="navbar-brand-img h-100" alt="main_logo">
          <span class="ms-1 font-weight-bold text-white">Black White Site</span>
        </a>
        <a class="navbar-brand m-0" href="#" v-if="nick_name !== '_'">
          <img :src="user_avatar" class="navbar-brand-img h-100" alt="main_logo">
          <span class="ms-1 font-weight-bold text-white">您好 {{ nick_name}}</span>
        </a>
      </div>
      <hr class="horizontal light mt-0 mb-2">
      <div class="collapse navbar-collapse  w-auto  max-height-vh-100" id="sidenav-collapse-main">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link text-white bg-gradient-primary" href="#" onclick="toggleSidenav()"
              style="background: black !important;">
              <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                <i class="material-icons opacity-10">close</i>
              </div>
              <span class="nav-link-text ms-1">关闭侧边栏</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/pages/homePage.html">
              <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                <i class="material-icons opacity-10">home</i>
              </div>
              <span class="nav-link-text ms-1">社区·圈子</span>
            </a>
          </li>
          <li class="nav-item mt-3">
            <h6 class="ps-4 ms-2 text-uppercase text-xs text-white font-weight-bolder opacity-8">My Space</h6>
          </li>
          <li class="nav-item" v-if="nick_name !== '_'">
            <a class="nav-link text-white active bg-gradient-primary" href="#" onclick="toggleSidenav()">
              <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                <i class="material-icons opacity-10">person</i>
              </div>
              <span class="nav-link-text ms-1">我的主页</span>
            </a>
          </li>
          <li class="nav-item" v-if="nick_name !== '_'">
            <a class="nav-link text-white" href="/pages/editorBywang.html">
              <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                <i class="fa fa-bandcamp" aria-hidden="true"></i>
              </div>
              <span class="nav-link-text ms-1">新建文章</span>
            </a>
          </li>
          <li class="nav-item" id="login_aside" v-if="nick_name === '_'">
            <a class="nav-link text-white " href="/pages/sign-in.html">
              <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                <i class="material-icons opacity-10">login</i>
              </div>
              <span class="nav-link-text ms-1">登录</span>
            </a>
          </li>
          <li class="nav-item" id="register_aside" v-if="nick_name === '_'">
            <a class="nav-link text-white " href="/pages/sign-up.html">
              <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                <i class="material-icons opacity-10">assignment</i>
              </div>
              <span class="nav-link-text ms-1">注册</span>
            </a>
          </li>
          <li class="nav-item" id="logout_aside" v-if="nick_name !== '_'">
            <a class="nav-link text-white " href="#" @click="logout">
              <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
                <!-- <i class="material-icons opacity-10">assignment</i> -->
                <i class="ni ni-user-run"></i>
              </div>
              <span class="nav-link-text ms-1">退出登录</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="sidenav-footer position-absolute w-100 bottom-0 ">
        <div class="mx-3">
        </div>
      </div>
    </aside>
    <main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
      <!-- Navbar -->
      <nav class="navbar navbar-main navbar-expand-lg px-0 mx-4 shadow-none border-radius-xl" id="navbarBlur"
        navbar-scroll="true">
        <div class="container-fluid py-1 px-3">
          <!-- 头部左侧 -->
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
              <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="javascript:;">Pages</a></li>
              <li class="breadcrumb-item text-sm text-dark active" aria-current="page">个人主页</li>
            </ol>
            <h6 class="font-weight-bolder mb-0">MY Page</h6>
          </nav>
          <!-- 头部右侧 -->
          <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
            <div class="ms-md-auto pe-md-3 d-flex align-items-center">
              <div class="input-group input-group-outline">
                <label class="form-label">Type here search</label>
                <input type="text" class="form-control" disabled>
              </div>
            </div>
            <ul class="navbar-nav  justify-content-end" id="right_ul">
              <li class="nav-item d-flex align-items-center">
                <a href="/pages/sign-in.html" class="nav-link text-body font-weight-bold px-0" v-if="nick_name === '_'">
                  <i class="fa fa-user me-sm-1"></i>
                  <span class="d-sm-inline d-none">登录/注册</span>
                </a>
              </li>
              <!-- 侧边栏显示与否 -->
              <li class="nav-item d-xl-none ps-3 d-flex align-items-center">
                <a href="javascript:;" class="nav-link text-body p-0" id="iconNavbarSidenav">
                  <div class="sidenav-toggler-inner">
                    <i class="sidenav-toggler-line"></i>
                    <i class="sidenav-toggler-line"></i>
                    <i class="sidenav-toggler-line"></i>
                  </div>
                </a>
              </li>
              <li class="nav-item px-3 d-flex align-items-center">
                <a href="javascript:;" class="nav-link text-body p-0">
                  <!-- 展示关键 fixed-plugin-button-nav -->
                  <i class="fa fa-cog fixed-plugin-button-nav cursor-pointer"></i>
                </a>
              </li>
              <li class="nav-item dropdown pe-2 d-flex align-items-center">
                <a href="javascript:;" class="nav-link text-body p-0" id="dropdownMenuButton" data-bs-toggle="dropdown"
                  aria-expanded="false">
                  <i class="fa fa-bell cursor-pointer"></i>
                </a>
                <ul class="dropdown-menu  dropdown-menu-end  px-2 py-3 me-sm-n4" aria-labelledby="dropdownMenuButton">
                  <li class="mb-2">
                    <a class="dropdown-item border-radius-md" href="javascript:;">
                      <div class="d-flex py-1">
                        <div class="my-auto">
                          <img src="/static/assets/img/team-2.jpg" class="avatar avatar-sm  me-3 ">
                        </div>
                        <div class="d-flex flex-column justify-content-center">
                          <h6 class="text-sm font-weight-normal mb-1">
                            <span class="font-weight-bold">New message</span> from Laur
                          </h6>
                          <p class="text-xs text-secondary mb-0">
                            <i class="fa fa-clock me-1"></i>
                            13 minutes ago
                          </p>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="mb-2">
                    <a class="dropdown-item border-radius-md" href="javascript:;">
                      <div class="d-flex py-1">
                        <div class="my-auto">
                          <img src="/static/assets/img/small-logos/logo-spotify.svg"
                            class="avatar avatar-sm bg-gradient-dark  me-3 ">
                        </div>
                        <div class="d-flex flex-column justify-content-center">
                          <h6 class="text-sm font-weight-normal mb-1">
                            <span class="font-weight-bold">New album</span> by Travis Scott
                          </h6>
                          <p class="text-xs text-secondary mb-0">
                            <i class="fa fa-clock me-1"></i>
                            1 day
                          </p>
                        </div>
                      </div>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <!-- End Navbar -->
      <div class="container-fluid py-4" v-loading="loading" style="position:relative;">
        <div class="row">
          <div class="col-lg-8">
            <div class="row">
              <div class="col-xl-6 mb-xl-0 mb-4">
                <div class="card bg-transparent shadow-xl">
                  <div class="overflow-hidden position-relative border-radius-xl">
                    <img src="/static/assets/img/illustrations/pattern-tree.svg"
                      class="position-absolute opacity-2 start-0 top-0 w-100 z-index-1 h-100" alt="pattern-tree">
                    <span class="mask bg-gradient-dark opacity-10"></span>
                    <div class="card-body position-relative z-index-1 p-3">
                      <!-- <i class="material-icons text-white p-2">wifi</i> -->
                      <i class="material-icons ms-auto text-white cursor-pointer" data-bs-toggle="tooltip"
                        data-bs-placement="top" title="Edit Intro" @click="editorInfo">edit</i>
                      <h5 class="text-white mt-4">My Motto</h5>
                      <h6 class="text-white mt-4 mb-5 pb-2" style="text-indent: 25PX;" v-if="editor_status===0">{{info}}
                      </h6>
                      <input type="text" placeholder="简言" class="form-control" v-model="info" maxlength="100"
                        @keyup.enter="updateInfo" v-model="keyword_context" v-if="editor_status===1"
                        style="background-color: white; margin-top: 20px;margin-bottom: 20px;">
                      <div class="d-flex">
                        <div class="d-flex">
                          <div class="me-4">
                            <p class="text-white text-sm opacity-8 mb-0">你好</p>
                            <h6 class="text-white mb-0">{{ nick_name }}</h6>
                          </div>
                          <div>
                            <p class="text-white text-sm opacity-8 mb-0">在本站已有</p>
                            <h6 class="text-white mb-0">{{use_time}}天</h6>
                          </div>
                        </div>
                        <div class="ms-auto w-20 d-flex align-items-end justify-content-end">
                          <el-image size="mini" :src="user_avatar" :preview-src-list="srcList"
                            style="width: 50px; border-radius: 25px;"></el-image>
                          <!-- <img class="w-60 mt-2" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="logo"> -->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-xl-6">
                <div class="row">
                  <div class="col-md-12 col-12">
                    <div class="card">
                      <div class="card-header mx-4 p-3 text-center">
                        <div
                          class="icon icon-shape icon-lg bg-gradient-primary shadow text-center border-radius-lg demo-image__preview">
                          <div hidden>
                            <input id="change" type="file" accept="image" style="display:none;" @change="change">
                          </div>
                          <el-image shape="square" :src="user_avatar" style="width: 64px; height: 64px;"
                            :preview-src-list="srcList"></el-image>
                        </div>
                      </div>
                      <div style="text-align: center; position: absolute;width: 100%;top: 60px;">
                        <el-button @click="upload" size="mini" circle style="background: #ebdecf;" alt="修改头像"><i
                            class="el-icon-gengxin"></i></el-button>
                      </div>
                      <el-divider content-position="center">ne~</el-divider>
                      <div class="row">
                        <div class="col-md-6 col-6">
                          <div class="card-body pt-0 p-3 text-center">
                            <h6 class="text-center mb-0">文章数</h6>
                            <span class="text-xs">包含未审核通过的文章</span>
                            <hr class="horizontal dark my-3">
                            <h5 class="mb-0">{{article_no}}</h5>
                            <span class="text-xs">全站排名&nbsp;暂不开放</span>
                          </div>
                        </div>
                        <div class="col-md-6 col-6">
                          <div class="card-body pt-0 p-3 text-center">
                            <h6 class="text-center mb-0">粉丝数</h6>
                            <span class="text-xs">你的忠实Fans们</span>
                            <hr class="horizontal dark my-3">
                            <h5 class="mb-0">{{fans_no}}</h5>
                            <span class="text-xs">全站排名&nbsp;暂不开放</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-12 mb-lg-0 mb-4">
                <div class="card mt-4">
                  <div class="card-header pb-0 p-3">
                    <div class="row">
                      <div class="col-6 d-flex align-items-center">
                        <h6 class="mb-0">我的分类</h6>
                      </div>
                      <div class="col-6 text-end">
                        <a class="btn bg-gradient-dark mb-0" href="javascript:;" @click="addArticleType"><i
                            class="material-icons text-sm">add</i>&nbsp;&nbsp;新增分类</a>
                      </div>
                    </div>
                  </div>
                  <div class="card-body p-3">
                    <div class="row">
                      <!-- 文章分类列表 -->
                      <div class="col-md-6 mb-4" v-for="(item, idx) in articleTypes" style="margin-bottom: 10px;">
                        <div
                          class="card card-body border card-plain border-radius-lg d-flex align-items-center flex-row">
                          <img class="w-10 me-3 mb-0" src="/static/assets/img/logos/mastercard.png" alt="logo">
                          <h6 class="mb-0">{{item.name}}</h6>
                          <el-divider direction="vertical"></el-divider>
                          <h6 class="mb-0"><span class="text-xs">与之相关</span>&nbsp;{{item.count}}&nbsp;<span
                              class="text-xs">篇</span></h6>
                          <div class="ms-auto text-end">
                            <a class="btn btn-link text-dark px-3 mb-0" href="javascript:;"><i
                                class="material-icons text-sm me-2">edit</i>编辑</a>
                            <a class="btn btn-link text-danger text-gradient px-3 mb-0" href="javascript:;"><i
                                class="material-icons text-sm me-2">delete</i>删除</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="card h-100">
              <div class="card-header pb-0 p-3">
                <div class="row">
                  <div class="col-6 d-flex align-items-center">
                    <h6 class="mb-0">About Me</h6>
                  </div>
                  <div class="col-6 text-end">
                    <button class="btn btn-outline-primary btn-sm mb-0" @click="getMessage">刷新消息</button>
                    <button class="btn btn-outline-primary btn-sm mb-0" @click="read_all" disabled>全部已读</button>
                  </div>
                </div>
              </div>
              <hr class="horizontal dark my-3">
              <div class="card-body p-3 pb-0">
                <ul class="list-group">
                  <el-empty description="暂无未读消息" v-if="aboutMes.length <= 0" image="/static/image/none.svg"></el-empty>
                  <li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
                    v-for="(item, idx) in aboutMes">
                    <div class="d-flex flex-column">
                      <span class="text-xs" style="color: black;">{{item.add_time}}  [{{item.message_type}}]</span>
                      <h6 class="mb-1 text-dark font-weight-bold text-sm">来自 <i
                          style="color: red;">{{item.from_}}</i>&nbsp;&nbsp;的消息</h6>
                      <span class="text-xs" v-if="item.need_reply == 1 && item.link_name !== ''">在<el-button size="mini"
                          style="color: red; padding: 5px;" @click="goto_detail(item.link, item.mode)">
                          {{item.link_name}}</el-button>中说到：</span>
                      <span class="text-xs" style="color: black;">{{item.info}}</span>
                    </div>
                    <div class="d-flex align-items-center text-sm">
                      <!-- $180 -->
                      <el-popover placement="right" width="400" trigger="click">
                        <input type="text" class="form-control" @keyup.enter="reply_this(item.mid, idx)"
                          v-model="reply_comment" placeholder="回复内容 回车结束">
                        <button slot="reference" class="btn btn-link text-dark text-sm mb-0 px-0 ms-4"
                          v-if="item.need_reply == 1">回复</button>
                      </el-popover>
                      <!-- <button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4" v-if="item.need_reply == 1" @click="reply_this(item.mid, idx)">回复</button> -->
                      <button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4"
                        @click="i_read(item.mid, idx)">已读</button>
                      <!-- <button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4">删除</button> -->
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-7 mt-4">
            <div class="card">
              <div class="card-header pb-0 px-3">
                <div class="row">
                  <div class="col-2 d-flex align-items-center">
                    <el-select v-model="keyword" placeholder="请选择">
                      <el-option v-for="item in keyword_options" :key="item.value" :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                  <div class="col-10 d-flex align-items-center">
                    <div class="input-group input-group-outline">
                      <label class="form-label">搜索文章</label>
                      <input type="text" class="form-control" @keyup.enter="search_something" v-model="keyword_context">
                    </div>
                  </div>
                </div>
                <el-divider content-position="right">DOWN HERE!</el-divider>
                <div class="row">
                  <div class="col-8 d-flex align-items-center">
                    <el-radio-group v-model="click_article" size="medium" fill="#191919">
                      <el-radio-button label="最新" class="bg-gradient-dark btn" style="padding: 0; margin: 0;">
                      </el-radio-button>
                      <el-divider direction="vertical"></el-divider>
                      <el-radio-button label="最火" class="bg-gradient-dark btn" style="padding: 0; margin: 0;">
                      </el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="col-4 text-end">
                    <a class="btn bg-gradient-dark mb-0" href="javascript:;" @click="addArticle"><i
                        class="material-icons text-sm">add</i>&nbsp;&nbsp;新增文章</a>
                  </div>
                </div>
              </div>
              <div class="card-body pt-4 p-3" style="height: 500px;" v-loading="loading_article">
                <el-empty description="暂无相关内容 快去创作吧~" v-if="articles.length <= 0" image="/static/image/no_result.svg">
                </el-empty>
                <el-scrollbar>
                  <ul class="list-group" v-infinite-scroll="loadArticle" infinite-scroll-delay="500"
                    infinite-scroll-distance="20" style="padding-right: 20px;">
                    <li class="list-group-item border-0 d-flex p-4 mb-2 bg-gray-100 border-radius-lg"
                      v-for="(item, idx) in articles" style="box-shadow: rgb(145 161 167 / 69%) 2px 2px 10px;">
                      <div class="d-flex flex-column" style="position: relative;">
                        <div style="position: absolute; top: -20px; left: -18px;">
                          <i style="font-size: 40px;" class="el-icon-shenhezhong" v-if="item.is_check===0"></i>
                          <i style="font-size: 40px;" class="el-icon-butongguo" v-if="item.is_check===-1"></i>
                          <i style="font-size: 40px;" class="el-icon-shenqingchenggong" v-if="item.is_check===1"></i>
                        </div>
                        <h6 class="mb-3 text-sm">{{item.title}}</h6>
                        <span class="mb-2 text-xs">
                          <span class="mb-2 text-xs">浏览数量: <span
                              class="text-dark font-weight-bold ms-sm-2">{{item.view_no}}</span></span>&nbsp;
                          <span class="mb-2 text-xs">点赞数量: <span
                              class="text-dark ms-sm-2 font-weight-bold">{{item.agree_no}}</span></span>&nbsp;
                          <span class="mb-2 text-xs">评论数量: <span
                              class="text-dark ms-sm-2 font-weight-bold">{{item.comment_no}}</span></span>
                        </span>
                        <span class="mb-2 text-xs">
                          <span class="mb-2 text-xs">发布时间: <span
                              class="text-dark ms-sm-2 font-weight-bold">{{item.add_time}}</span></span>&nbsp;
                          <span class="mb-2 text-xs">修改时间: <span
                              class="text-dark ms-sm-2 font-weight-bold">{{item.change_time}}</span></span>
                        </span>
                        <span class="mb-2 text-xs">发布状态: <span class="text-dark ms-sm-2 font-weight-bold"
                            v-if="item.is_check===1">{{item.status}}</span><span
                            class="text-dark ms-sm-2 font-weight-bold" v-if="item.is_check!==1"
                            style="color: tomato !important;">{{item.status}}</span></span>
                        <span class="mb-2 text-xs" v-if="item.is_check===-1">整改意见: <span
                            class="text-dark ms-sm-2 font-weight-bold"
                            style="color: tomato !important;">{{item.word}}</span></span>

                        <span class="mb-2 text-xs">公开状态: <span class="text-dark ms-sm-2 font-weight-bold">
                            <el-switch v-model="item.is_public" @change="setPublic(item.aid)" inactive-color="#ff4949"
                              active-color="#13ce66" active-text="公开" inactive-text="私有" size="mini">
                            </el-switch>
                          </span></span>

                      </div>
                      <div class="ms-auto text-end">
                        <a class="btn btn-link text-dark px-3 mb-0" href="javascript:;"
                          @click="viewThis(item.aid, item.mode)"><i class="el-icon-charulianjie"></i>查看</a>
                        <a class="btn btn-link text-dark px-3 mb-0" href="javascript:;"
                          @click="editorThis(item.aid, item.mode)"><i class="el-icon-edit"></i>编辑</a>
                        <a class="btn btn-link text-danger text-gradient px-3 mb-0" href="javascript:;"
                          @click="deleteThis(item.aid, idx)"><i class="el-icon-shanchu"></i>删除</a>
                      </div>
                    </li>
                  </ul>
                  <div style="text-align: center;">
                    <el-divider content-position="center" v-if="nextArticle !== null">下滑加载更多</el-divider>
                    <el-divider content-position="center" v-if="nextArticle === null">没有更多了</el-divider>
                    <!-- <el-button type="info" v-if="nextArticle === null" id="more">没有更多了</el-button> -->
                  </div>
                </el-scrollbar>

              </div>
            </div>
          </div>
          
          <!-- 普通用户 -->
          <div class="col-md-5 mt-4" style="position: relative;">
            <!-- 审核员 -->
            <el-button v-if="level >= 10" type="danger" effect="dark" size="small" @click="goto_admin"
              style="position: absolute; z-index: 1;left: 100px;top: 20px;">网站管理页面</el-button>
            <div class="card h-100 mb-4">
              <div class="card-header pb-0 px-3">
                <div class="row">
                  <div class="col-md-6">
                    <h6 class="mb-0">我的资料</h6>
                    <span class="text-xs">{{nick_name}}</span>
                  </div>
                  <div class="col-md-6 d-flex justify-content-start justify-content-md-end align-items-center">
                    <!-- <a class="btn btn-link text-dark px-3 mb-0" href="javascript:;" @click="getAdminArticle"><i
                        class="material-icons text-sm me-2">key</i>获取</a> -->
                  </div>
                </div>
              </div>
              <div class="card-body pt-4 p-3">
                <h6 class="text-uppercase text-body text-xs font-weight-bolder mb-3">TODO</h6>
                <ul class="list-group">
                  <li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
                    v-for="(item, idx) in adminArticles">
                    <div class="d-flex align-items-center">
                      <button
                        class="btn btn-icon-only btn-rounded btn-outline-danger mb-0 me-3 p-3 btn-sm d-flex align-items-center justify-content-center"
                        @click="goCheck(item.aid, item.mode)"><i class="material-icons text-lg">code</i></button>
                      <div class="d-flex flex-column">
                        <h6 class="mb-1 text-dark text-sm">{{item.title}}</h6>
                        <span class="text-xs">最初发表时间 {{item.add_time}}</span>
                        <span class="text-xs">最近修改时间 {{item.change_time}}</span>
                      </div>
                    </div>
                  </li>
                </ul>
                <el-empty description="Coming Soon~" v-if="adminArticles.length <= 0"
                  image="/static/image/no_result.svg"></el-empty>
              </div>
            </div>
          </div>

        </div>
        <div v-show="panel" class="father"
          style="width: 90%; margin-left: auto;margin-right: auto; position: absolute; top: 0; z-index: 2;">
          <div class="container">
            <div id="cropper" style="height: 100%; width: 100%; margin: auto">
              <img id="image" :src="url" alt="Picture" style="width: 100%;">
            </div>
            <div>
              <div style="text-align: center; margin-top: 10px; background: black; padding: 10px;border-radius: 5px;">
                <el-row :gutter="20">
                  <el-col :span="12" :offset="6">
                    <div class="grid-content bg-purple-light">
                      <el-button icon="el-icon-zoom-out" size="mini" circle @click="zoom(-1)"></el-button>
                      <el-button icon="el-icon-zoom-in" size="mini" circle @click="zoom(1)"></el-button>
                      <el-button icon="el-icon-refresh" size="mini" circle @click="rotate"></el-button>
                      <el-button type="success" icon="el-icon-check" size="mini" circle @click="crop">
                      </el-button>
                      <el-button type="danger" icon="el-icon-close" size="mini" circle @click="panel=false"></el-button>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
      </div>
      <footer class="footer py-4  ">
        <div class="container-fluid">
          <div class="row align-items-center justify-content-lg-between">
            <div class="col-lg-6 mb-lg-0 mb-4">
              <div class="copyright text-center text-sm text-muted text-lg-start">
                ©
                <script>
                  document.write(new Date().getFullYear())
                </script>,
                made with <i class="fa fa-heart"></i> by
                <a href="https://www.creative-tim.com" class="font-weight-bold" target="_blank">Creative Tim</a>
                for a better web.
              </div>
            </div>
            <div class="col-lg-6">
              <ul class="nav nav-footer justify-content-center justify-content-lg-end">
                <li class="nav-item">
                  <a href="https://www.creative-tim.com" class="nav-link text-muted" target="_blank">Creative Tim</a>
                </li>
                <li class="nav-item">
                  <a href="https://www.creative-tim.com/presentation" class="nav-link text-muted" target="_blank">About
                    Us</a>
                </li>
                <li class="nav-item">
                  <a href="https://www.creative-tim.com/blog" class="nav-link text-muted" target="_blank">Blog</a>
                </li>
                <li class="nav-item">
                  <a href="https://www.creative-tim.com/license" class="nav-link pe-0 text-muted"
                    target="_blank">License</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </footer>
    </main>
    <div class="fixed-plugin">
      <a class="fixed-plugin-button text-dark position-fixed px-3 py-2">
        <i class="material-icons py-2">settings</i>
      </a>
      <div class="card shadow-lg">
        <div class="card-header pb-0 pt-3">
          <div class="float-start">
            <h5 class="mt-3 mb-0">嗨喽~</h5>
            <p>配置你想要的主题.</p>
          </div>
          <div class="float-end mt-4">
            <button class="btn btn-link text-dark p-0 fixed-plugin-close-button">
              <i class="material-icons">clear</i>
            </button>
          </div>
          <!-- End Toggle Button -->
        </div>
        <hr class="horizontal dark my-1">
        <div class="card-body pt-sm-3 pt-0">
          <!-- Sidebar Backgrounds -->
          <div>
            <h6 class="mb-0">侧边栏聚焦</h6>
          </div>
          <a href="javascript:void(0)" class="switch-trigger background-color">
            <div class="badge-colors my-2 text-start">
              <span class="badge filter bg-gradient-primary active" data-color="primary"
                onclick="sidebarColor(this)"></span>
              <span class="badge filter bg-gradient-dark" data-color="dark" onclick="sidebarColor(this)"></span>
              <span class="badge filter bg-gradient-info" data-color="info" onclick="sidebarColor(this)"></span>
              <span class="badge filter bg-gradient-success" data-color="success" onclick="sidebarColor(this)"></span>
              <span class="badge filter bg-gradient-warning" data-color="warning" onclick="sidebarColor(this)"></span>
              <span class="badge filter bg-gradient-danger" data-color="danger" onclick="sidebarColor(this)"></span>
            </div>
          </a>
          <!-- Sidenav Type -->
          <div class="mt-3">
            <h6 class="mb-0">侧边栏样式</h6>
            <p class="text-sm">选择想要的侧边栏样式</p>
          </div>
          <div class="d-flex">
            <button class="btn bg-gradient-dark px-3 mb-2 active" data-class="bg-gradient-dark"
              onclick="sidebarType(this)">暗黑</button>
            <button class="btn bg-gradient-dark px-3 mb-2 ms-2" data-class="bg-transparent"
              onclick="sidebarType(this)">透明</button>
            <button class="btn bg-gradient-dark px-3 mb-2 ms-2" data-class="bg-white"
              onclick="sidebarType(this)">白亮</button>
          </div>
          <p class="text-sm d-xl-none d-block mt-2">You can change the sidenav type just on desktop view.</p>
          <!-- Navbar Fixed -->
          <div class="mt-3 d-flex">
            <h6 class="mb-0">导航栏固定</h6>
            <div class="form-check form-switch ps-0 ms-auto my-auto">
              <input class="form-check-input mt-1 ms-auto" type="checkbox" id="navbarFixed" onclick="navbarFixed(this)">
            </div>
          </div>
          <hr class="horizontal dark my-3">
          <div class="mt-2 d-flex">
            <h6 class="mb-0">全局主题[白/黑]</h6>
            <div class="form-check form-switch ps-0 ms-auto my-auto">
              <input class="form-check-input mt-1 ms-auto" type="checkbox" id="dark-version" onclick="darkMode(this)">
            </div>
          </div>
          <hr class="horizontal dark my-sm-4">
          <a class="btn btn-outline-dark w-100" href="">completed welcome blackwhitesite</a>
        </div>
      </div>
    </div>
  </div>
  {% endverbatim myblock %}
  <!--   Core JS Files   -->
  <script src="/static/assets/js/core/popper.min.js"></script>
  <script src="/static/assets/js/core/bootstrap.min.js"></script>
  <script src="/static/assets/js/plugins/perfect-scrollbar.min.js"></script>
  <script src="/static/assets/js/plugins/smooth-scrollbar.min.js"></script>

  <script src="/static/assets/js/my/jquery.js"></script>
  <script src="/static/assets/js/my/vue.min.js"></script>
  <script src="/static/assets/js/my/vue-router.js"></script>
  <script src="/static/assets/js/my/ele.index.js"></script>
  <script src="/static/js/ping.js"></script>
  <script src="/static/js/clickEmoji.js"></script>
  <script src="/static/js/cookieUtil.js"></script>
  <script src="/static/js/cropper.js"></script>

  <script>
    var win = navigator.platform.indexOf('Win') > -1;
    if (win && document.querySelector('#sidenav-scrollbar')) {
      var options = {
        damping: '0.5'
      }
      Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
    }
  </script>
  <!-- Github buttons -->
  <script>
    new Vue({
      el: '#app',
      data: {
        editor_status: 0,
        click_article: "最新",
        refer: localStorage.getItem('refer'),
        nick_name: "",
        user_avatar: "",
        info: "_",
        use_time: "_",
        article_no: 0,
        agree_no: 0,
        fans_no: 0,
        level: 1,
        loading: true,
        loading_article: true,
        keyword_options: [{
          value: '标题',
          label: '搜标题'
        }, {
          value: '内容',
          label: '搜内容'
        }, {
          value: '分类',
          label: '搜分类'
        }],
        keyword: "标题",
        keyword_context: "",
        articleTypes: [
          {
            name: "类型1",
            count: 3,
            link: "#"
          },
          {
            name: "类型2",
            count: 30,
            link: "#"
          }
        ],
        articles: [],
        aboutMes: [
          // {
          //   from_: "不知火舞1",
          //   info: "不知名的文章1",
          //   link: "xxxx",
          //   need_reply: 
          // }
        ],
        nextArticle: null,
        adminArticles: [],
        srcList: [localStorage.getItem("avatar")],
        picValue: '',
        cropper: '',
        croppable: false,
        panel: false,
        url: '/static/image/default.jpg/',
        current: 0,
        headerImage: '',
        picValue: '',
        color: '#d9d9d9',
        reply_comment: ""
      },
      created() {
      },
      mounted() {
        // 动态禁用元素呗
        this.loading = true;
        this.auth();
        this.change_sign_status();
        var self = this
        let image = document.getElementById('image');
        // console.log(image)
        this.cropper = new Cropper(image, {
          aspectRatio: 1, // 裁剪比例
          viewMode: 1,
          zoomOnWheel: true, // 是否允许通过鼠标滚轮来缩放图片
          background: true, // 是否在容器上显示网格背景
          rotatable: true, // 是否允许旋转图片
          ready: function () {
            self.croppable = true
          }
        });
      },
      watch: {
      },
      methods: {
        editorInfo() {
          this.editor_status = 1;
        },
        updateInfo() {
          this.loading = true;
          const url = `/apiUser/users/`;
          let regexp = /.*csrftoken=([^;.]*).*$/;
          let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1];
          let regexp_token = /.*jwtToken=([^;.]*).*$/;
          let token = document.cookie.match(regexp_token) === null ? null : document.cookie.match(regexp_token)[1];
          fetch(url, {
            method: 'PUT',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
              'token': token,
              'X-CSRFToken': xCSRF
            },
            body: `info=${this.info}`
          })
            .then(resp => resp.json())
            .then(json => {
              if (json.code !== 200) {
                this.$message({
                  message: json.message,
                  type: 'warning'
                })
              } else {
                this.$message({
                  message: json.message,
                  type: 'success'
                })
              }
              this.loading = false;
            })
          this.editor_status = 0;
        },
        getMessage() {
          const url_ = `/apiArticle/message/`;
          let regexp = /.*csrftoken=([^;.]*).*$/;
          let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1];
          let regexp_token = /.*jwtToken=([^;.]*).*$/;
          let token = document.cookie.match(regexp_token) === null ? null : document.cookie.match(regexp_token)[1];
          fetch(url_, {
            method: 'GET',
            headers: {
              'token': token,
              'X-CSRFToken': xCSRF,
            },
          })
            .then(resp => resp.json())
            .then(json => {
              if (json.code !== 200) {

              } else {
                /*获取用户信息*/
                this.aboutMes = json.data.results;
              }
            })
        },
        read_all() {
          for (var i = 0; i < this.aboutMes.length; i++) {
            this.i_read(this.aboutMes[i].mid, i)
          }
        },
        goto_detail(aid, mode) {
          // 前往文章详情
          let url;
          // console.log(mode);
          if (mode === '1' || mode === 1) {
            url = `/pages/showEditorBywang.html/?p=${aid}`;
          } else {
            url = `/pages/showEditorByEditorMD.html/?p=${aid}`;
          };
          // localStorage.setItem('checkMyself', '1');
          // localStorage.setItem("view_aid", aid);
          localStorage.setItem('refer', document.location.href);
          document.location.href = url;
        },
        i_read(mid, idx) {
          // 消息已被阅读
          const url_ = `/apiArticle/message/?mid=${mid}`;
          let regexp = /.*csrftoken=([^;.]*).*$/;
          let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1];
          let regexp_token = /.*jwtToken=([^;.]*).*$/;
          let token = document.cookie.match(regexp_token) === null ? null : document.cookie.match(regexp_token)[1];
          fetch(url_, {
            method: 'PUT',
            headers: {
              'token': token,
              'X-CSRFToken': xCSRF,
            },
          })
            .then(resp => resp.json())
            .then(json => {
              if (json.code !== 200) {

              } else {
                /*获取用户信息*/
                this.aboutMes.splice(idx, 1);
              }
            })
        },
        reply_this(mid, idx) {
          // 消息已被回复
          if (this.reply_comment.length <= 2) {
            this.$message({
              message: "回复内容太短了",
              type: 'warning'
            })
            return
          }
          const url_ = `/apiArticle/message/?mid=${mid}`;
          let regexp = /.*csrftoken=([^;.]*).*$/;
          let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1];
          let regexp_token = /.*jwtToken=([^;.]*).*$/;
          let token = document.cookie.match(regexp_token) === null ? null : document.cookie.match(regexp_token)[1];
          fetch(url_, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
              'token': token,
              'X-CSRFToken': xCSRF,
            },
            body: `comment=${this.reply_comment}`
          })
            .then(resp => resp.json())
            .then(json => {
              if (json.code !== 200) {
                this.$message({
                  message: json.message,
                  type: 'warning'
                })
              } else {
                /*获取用户信息*/
                this.reply_comment = "";
                this.aboutMes.splice(idx, 1);
                this.$message({
                  message: `回复成功`,
                  type: 'success'
                })
              }
            })
        },
        goBack() {
          document.location.href = this.refer || `/pages/homePage.html/`
        },
        loadArticle() {
          if (this.nextArticle !== null) {
            this.getArticles(this.nextArticle, mode = '1')
          }
        },
        setPublic(aid) {
          this.loading = true;
          console.log(aid);
          const url = `/apiArticle/myArticles/`;
          let regexp = /.*csrftoken=([^;.]*).*$/;
          let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1];
          let regexp_token = /.*jwtToken=([^;.]*).*$/;
          let token = document.cookie.match(regexp_token) === null ? null : document.cookie.match(regexp_token)[1];
          fetch(url, {
            method: 'PUT',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
              'token': token,
              'X-CSRFToken': xCSRF
            },
            body: `title=&text=&text_content=&avatar=&aid=${aid}&tags=&type=1`
          })
            .then(resp => resp.json())
            .then(json => {
              if (json.code !== 200) {
                this.$message({
                  message: json.message,
                  type: 'warning'
                })
              } else {
                this.$message({
                  message: json.message,
                  type: 'success'
                })
              }
              this.loading = false;
            })

        },
        loadMoreArticle() {
          const url = this.nextArticle;
          this.getArticles(url, mode = 1);
        },
        getArticleDetail(aid) {
          console.log(aid);
        },
        change_sign_status() {
          this.nick_name = localStorage.getItem("nick_name") === null ? '_' : localStorage.getItem("nick_name");
          // let self = this;
          // setTimeout(function () {
          //   self.search_something();
          //   self.getMyInfo();
          // }, 300)
        },
        logout() {
          localStorage.removeItem('token');
          localStorage.removeItem('nick_name');
          this.change_sign_status();
          window.clearCookie("jwtToken");
          document.location.href = '/pages/homePage.html'
        },
        addArticleType() {
          var new_ = {
            name: "新类型",
            count: 0,
            link: "#"
          };
          this.articleTypes.push(new_);
        },
        addArticle() {
          document.location.href = '/pages/editorBywang.html'
        },
        // 切换文章类型
        changeType(e) {
          // console.log(e);
          const near = document.getElementById("near_");
          const hot = document.getElementById("hot_");
          // 如果点击的时候最近为选中状态
          console.log(near.getAttribute("type"));
          if (near.getAttribute("type") === "success") {
            hot.setAttribute("type", "success");
            hot.setAttribute("disabled", "true");
            near.setAttribute("type", "info");
            near.removeAttribute("disabled")
          } else {
            near.setAttribute("type", "success");
            near.setAttribute("disabled", "true");
            hot.setAttribute("type", "info");
            hot.removeAttribute("disabled")
          }
        },
        search_something() {
          // console.log(this.keyword, this.keyword_context);
          // 这里搜索文章
          let url = ""
          if (this.keyword === '分类') {
            url = `/apiArticle/myArticles/?tags=${this.keyword_context}`;
          } else if (this.keyword === '标题') {
            url = `/apiArticle/myArticles/?title=${this.keyword_context}`;
          } else {
            url = `/apiArticle/myArticles/?text=${this.keyword_context}&content_text=${this.keyword_context}`;
          }
          this.getArticles(url);
        },
        getArticles(url, mode = null) {
          this.loading_article = true;
          let regexp = /.*csrftoken=([^;.]*).*$/;
          let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1];
          let regexp_token = /.*jwtToken=([^;.]*).*$/;
          let token = document.cookie.match(regexp_token) === null ? null : document.cookie.match(regexp_token)[1];
          fetch(url, {
            method: 'GET',
            headers: {
              'token': token,
              'X-CSRFToken': xCSRF
            }
          })
            .then(resp => resp.json())
            .then(json => {
              if (json.code !== 200) {
                this.$message({
                  message: json.message,
                  type: 'warning'
                })
              } else {
                if (mode !== null) {
                  this.articles = this.articles.concat(json.data.results);
                } else {
                  this.articles = json.data.results;
                }
                this.nextArticle = json.data.next;
              }
              this.accepting = "0";
              this.loading = false;
              this.loading_article = false;
            })
        },
        getMyInfo() {
          const url = `/apiUser/users/`
          let regexp = /.*csrftoken=([^;.]*).*$/;
          let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1];
          let regexp_token = /.*jwtToken=([^;.]*).*$/;
          let token = document.cookie.match(regexp_token) === null ? null : document.cookie.match(regexp_token)[1];
          fetch(url, {
            method: 'GET',
            headers: {
              'token': token,
              'X-CSRFToken': xCSRF
            }
          })
            .then(resp => resp.json())
            .then(json => {
              if (json.code !== 200) {
                this.$message({
                  message: json.message,
                  type: 'warning'
                })
              } else {
                this.info = json.data.info;
                this.use_time = json.data.use_time;
                this.nick_name = json.data.nick_name;
                this.user_avatar = json.data.avatar;
                this.article_no = json.data.article_no;
                this.agree_no = json.data.agree_no;
                this.fans_no = json.data.fans_no;
                this.level = json.data.level;
              }
            })
        },
        viewThis(aid, mode) {
          let url;
          // console.log(mode);
          if (mode === '1') {
            url = `/pages/showEditorBywang.html/?p=${aid}`;
          } else {
            url = `/pages/showEditorByEditorMD.html/?p=${aid}`;
          };
          localStorage.setItem('checkMyself', '1');
          // localStorage.setItem("view_aid", aid);
          localStorage.setItem('refer', document.location.href);
          document.location.href = url;
        },
        editorThis(aid, mode) {
          let url;
          // console.log(mode);
          if (mode === '1') {
            url = `/pages/editorBywangPatch.html/`;
          } else {
            url = `/pages/editorByEditorMDPatch.html/`;
          };
          localStorage.setItem('editorAid', aid);
          localStorage.setItem('refer', document.location.href);
          document.location.href = url;
        },
        deleteThis(aid, idx) {
          // console.log(aid, idx);
          // 前置匹配
          this.$confirm(`确定删除该文章吗? (删除后无法恢复)`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const url = `/apiArticle/myArticles/?aid=${aid}`;
            let regexp = /.*csrftoken=([^;.]*).*$/;
            let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1];
            let regexp_token = /.*jwtToken=([^;.]*).*$/;
            let token = document.cookie.match(regexp_token) === null ? null : document.cookie.match(regexp_token)[1];
            fetch(url, {
              method: 'DELETE',
              headers: {
                'token': token,
                'X-CSRFToken': xCSRF
              }
            })
              .then(resp => resp.json())
              .then(json => {
                if (json.code !== 200) {
                  this.$message({
                    message: json.message,
                    type: 'warning'
                  })
                } else {
                  // this.articles = this.articles.concat(json.data.results);
                  this.$message({
                    message: json.message,
                    type: 'success'
                  });
                  this.articles.splice(idx, 1);
                }
              })
          }).catch((err) => {
            // console.log(111, String(err));
            return
          });
        },
        getAdminArticle() {
          // 管理员专用
          this.loading = true;
          const url = `/apiArticle/superAdmin/`;
          let regexp = /.*csrftoken=([^;.]*).*$/;
          let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1];
          let regexp_token = /.*jwtToken=([^;.]*).*$/;
          let token = document.cookie.match(regexp_token) === null ? null : document.cookie.match(regexp_token)[1];
          fetch(url, {
            method: 'GET',
            headers: {
              'token': token,
              'X-CSRFToken': xCSRF
            }
          })
            .then(resp => resp.json())
            .then(json => {
              if (json.code !== 200) {
                this.$message({
                  message: json.message,
                  type: 'warning'
                })
                this.loading = false;
              } else {
                this.$message({
                  message: json.message,
                  type: 'success'
                });
                this.adminArticles = json.data.results;
                this.loading = false;
              }
            })
        },
        goCheck(aid, mode) {
          let url;
          if (mode === 1 || mode === "1") {
            url = `/pages/adminArticleBywang.html/`
          } else {
            url = `/pages/adminArticleByEditorMD.html/`
          }
          localStorage.setItem('checkAid', aid);
          localStorage.setItem('refer', document.location.href);
          document.location.href = url;
        },
        auth() {
          this.loading = true;
          const url = `/apiUser/user/auth/`;
          let regexp = /.*csrftoken=([^;.]*).*$/;
          let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1];
          let regexp_token = /.*jwtToken=([^;.]*).*$/;
          let token = document.cookie.match(regexp_token) === null ? null : document.cookie.match(regexp_token)[1];
          fetch(url, {
            method: 'GET',
            headers: {
              'token': token,
              'X-CSRFToken': xCSRF
            }
          })
            .then(resp => resp.json())
            .then(json => {
              if (json.code !== 200) {
                this.$confirm(`${json.message}`, '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  localStorage.setItem('refer', document.location.href);
                  document.location.href = '/pages/sign-in.html/';
                }).catch(() => {
                  document.location.href = '/pages/homePage.html/';
                });
              } else {
                this.page_title = `${json.data.user} 的新发布`;
                this.search_something();
                this.getMyInfo();
                this.getMessage();
              }
            })
        },
        // 头像上传
        // 点击按钮自动执行选择文件事件
        upload() {
          this.url = ''
          this.current = 0
          document.getElementById('change').value = null
          document.getElementById('change').click()
        },
        // 旋转
        rotate() {
          // alert(this.cropper.image)
          this.current = (this.current + 90) % 360
          this.cropper.rotate(this.current)
        },
        // 缩放
        zoom(num) {
          num = num || 1
          this.cropper.zoom(num)
        },

        getObjectURL(file) {
          var url = null
          if (window.createObjectURL !== undefined) {
            // basic
            url = window.createObjectURL(file)
          } else if (window.URL !== undefined) {
            // mozilla(firefox)
            url = window.URL.createObjectURL(file)
          } else if (window.webkitURL !== undefined) {
            // webkit or chrome
            url = window.webkitURL.createObjectURL(file)
          }
          return url
        },
        change(e) {
          console.log(e.target.files[0].size, '图片大小')
          if (e.target.files[0].size > 1024 * 1024 * 10) {
            this.$message.error('图片过大，请重新选择图片')
            return
          }
          const files = e.target.files || e.dataTransfer.files
          if (!files.length) return
          this.panel = true
          this.picValue = files[0]
          this.url = this.getObjectURL(this.picValue)
          // 每次替换图片要重新得到新的url
          if (this.cropper) {
            this.cropper.replace(this.url)
          }
          // console.log(this.url)
          this.panel = true
        },
        crop() {
          this.panel = false
          var croppedCanvas
          if (!this.croppable) {
            return
          }
          // Crop
          croppedCanvas = this.cropper.getCroppedCanvas()
          // console.log(this.cropper.url, '图片路径')// 图片路径
          // Round
          /* 截取圆形
            roundedCanvas = this.getRoundedCanvas(croppedCanvas);
            this.headerImage = roundedCanvas.toDataURL();
            */
          // 方形
          // croppedCanvas canvas的宽高
          this.headerImage = croppedCanvas.toDataURL('image/jpeg')
          // console.log(this.headerImage, 'this.headerImage')
          // var gettype = Object.prototype.toString
          this.postImg()
        },
        dataURLtoFile(dataurl, filename = 'file') {
          const arr = dataurl.split(',')
          const mime = arr[0].match(/:(.*?);/)[1]
          const suffix = mime.split('/')[1]
          const bstr = atob(arr[1])
          let n = bstr.length
          const u8arr = new Uint8Array(n)
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
          }
          return new File([u8arr], `${filename}.${suffix}`, { type: mime })
        },
        postImg() {
          // 图片的上传
          var formData = new FormData()
          formData.append('file', this.dataURLtoFile(this.headerImage))
          const url = `/apiUser/avatar/`;
          let regexp = /.*csrftoken=([^;.]*).*$/;
          let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1];
          let regexp_token = /.*jwtToken=([^;.]*).*$/;
          let token = document.cookie.match(regexp_token) === null ? null : document.cookie.match(regexp_token)[1];
          fetch(url, {
            method: 'POST',
            headers: {
              'token': token,
              'X-CSRFToken': xCSRF,
            },
            body: formData,
          })
            .then(resp => resp.json())
            .then(json => {
              if (json.code !== 200) {
                this.$confirm(`${json.message}`, '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  localStorage.setItem('refer', document.location.href);
                  document.location.href = '/pages/sign-in.html/';
                }).catch(() => {
                  this.goBack();
                });
              } else {
                localStorage.setItem('avatar', json.data.file_name);
                this.circleUrl = json.data.file_name;
                this.srcList = [json.data.file_name];
                this.$message({
                  message: json.message,
                  type: 'success'
                })
                this.user_avatar = json.data.file_name
              }
            })
        },
        goto_admin() {
          let url = '/pages/adminArticle.html/'
          localStorage.setItem('refer', document.location.href);
          document.location.href = url;
        },
      }
    })
  </script>
  <script async defer src="https://buttons.github.io/buttons.js"></script>
  <!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
  <script src="/static/assets/js/material-dashboard.min.js?v=3.0.0"></script>
  <script src="https://myhkw.cn/api/player/1636018876119" id="myhk" key="1636018876119" m="1"></script>
</body>

</html>